<template>
	<view>
		<view class="formStyle">
			  <view  class="head-sculpture">
				  <img src="../../static/login/登录头像.png" alt="">
			  </view>
			<uni-forms ref="userForm" :rules="userRules" labelWidth="80px" :modelValue="user" class="userBox">
				<uni-forms-item  required name="userName" >
					<uni-easyinput v-model="user.userName" placeholder="请输入用户名" />
				</uni-forms-item>
				<uni-forms-item  required name="password"  >
					<uni-easyinput type="password" v-model="user.password" placeholder="请输入登录密码" />
				</uni-forms-item>
			</uni-forms>
			<view>
				<text style="color:red">{{loginError}}</text>
			</view>
			<button :disabled="canSubmit" type="primary" @click="submit('userForm')"  class="styleSloid">登录</button>
			
			<navigator url="/pages/register/register" hover-class="navigator-hover" style="margin-top: 20px;"  class="styleSloid">
				<button type="default">注册</button>
			</navigator>	
		<view style="padding: 10px;">
						<checkbox-group @change="checkChange" class="checkBoxOne">
							<label>
								<checkbox :checked="checkStatus" value="0" />确认已经知晓本系统对用户隐私的条款。
							</label>
						</checkbox-group>				
		</view> 
		</view>
	</view>
</template>

<script>
	//import axios from 'axios'
	 const userData =require('@/Data/UserData.json');
	export default{
		data(){
            return {
				// 用户数据模型
				user:{
					name:'',
					userName:'zhangxiaofei',
					phoneNumber:'',
					email:'',
					password:'1234@Abcd',
					confirmPassword:''
				},
				// 用户数据校验规则
				userRules:{
					userName:{
						rules:[{
							required:true,
							errorMessage:'用户名不能为空',
						}]
					},
					password:{
						rules:[{
							required:true,
							errorMessage:'登录密码不能为空',
						}]
					},
				},
				// 用户数据集合
				userCollection:null,
				// 是否可以提交
				canSubmit:true,
				// 确认是否知晓隐私声明
				checkStatus:false,
				// 登录用户和密码错误提示
				loginError:''
            }
		},
		
		onLoad(){
			//this.getUserCollection();
		},
		
		methods:{
			// 在当前页面里获取本地数据源数据
			setUserCollection(){
				this.userCollection = userData
			},
			// 提交登录令牌
			submit(ref) {
				// 先执行校验
				this.$refs[ref].validate().then(res => {
					// 按用户名和密码检索 userCollection 中是否包含有对应的用户，如果有，则将登录的数据，则跳转至学习中心
					// 本地集合做数据源
					//let currentUser = this.userCollection.find(x=>x.userName === this.user.userName && x.password === this.user.password)
					// 使用全局变量做数据源，在实际的应用中，currentUser 是通过访问后端 Api 获取的
					let currentUser = getApp().globalData.globalUserCollection.find(x=>x.userName === this.user.userName && x.password === this.user.password)
					if(currentUser!= null){
						getApp().globalData.globalUser = currentUser
						let tokenJsonString = JSON.stringify(currentUser)  
						// 则将登录的数据存储到 token
						uni.setStorage({
							key:'token',
							data:tokenJsonString,
							success:function(){
								// 跳转至学习中心
								uni.reLaunch({
									url:"/pages/home/home"
								})
								// 做其它处理
							}
						})
					}else{
						this.loginError='用户名或者密码错误'
					}
				}).catch(err => {
					console.log('err', err);
				})
			},	
			// 检查条款确认是否可以激活提交按钮
			checkChange(e){
				this.checkStatus = !this.checkStatus;
				if(this.checkStatus){
					// 激活
					this.canSubmit = false
				}else{
					// 关闭提交
					this.canSubmit = true;
				}
			}
		}
	}
</script>

<style lang="scss">
	
	.formStyle {
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		margin-top: 20%;
		//background-color: #fff;
	}
 .head-sculpture{
	margin-bottom: 20px;
}
 .head-sculpture img{
	background-size: cover;
}
	.userBox{
		width: 75%;
	}
	.styleSloid{
		width: 75%;
	}
	.checkBoxOne{
		margin-top: 30px;
	}
</style>
